<template>
  <div>
    <header>
      <van-nav-bar title="当前位置" left-arrow @click-left="onClickLeft" />
    </header>
    <MapContainer></MapContainer>
    <div class="search">
      <van-search
        v-model="value"
        shape="round"
        placeholder="小区/写字楼/学校等"
        :show-action="searchFlag"
        @focus="searching"
        @cancel="onCancel"
      />
    </div>
    <div class="footer">
      <van-cell
        :title="item.name"
        :value="item.distance"
        v-for="(item, index) in location"
        :key="index"
        @click="checkIndex(index, item)"
        :icon="checkedIndex == index ? 'success' : ''"
        center
      />
    </div>
    <div class="searchBox" v-if="searchFlag">
      <van-cell
        :title="item.name"
        :value="item.distance"
        v-for="(item, index) in location"
        :key="index"
        @click="confirmSearch(item)"
        center
      />
    </div>
  </div>
</template>
<script>
import MapContainer from "@/components/map/MapContainer.vue";
export default {
  name: "NowLocation",
  components: {
    MapContainer,
  },
  data() {
    return {
      value: "",
      checkedIndex: 0,
      searchFlag: false,
      location: [
        {
          name: "回龙观街道",
          distance: "100m以内",
        },
        {
          name: "金艳龙科研楼",
          distance: "200m",
        },
        {
          name: "春野画室",
          distance: "300m",
        },
        {
          name: "光滑时代（金艳龙科研楼店）",
          distance: "400m",
        },
      ],
    };
  },
  created() {},
  computed: {},
  methods: {
    onClickLeft() {
      this.$router.push({
        path: "/senderr",
        query: {
          location: "请选择",
        },
      });
    },
    searching() {
      this.searchFlag = true;
    },
    onCancel() {
      this.searchFlag = false;
    },
    confirmSearch(item) {
      this.searchFlag = false;
      this.value = item.name;
    },
    checkIndex(index, item) {
      if (this.checkedIndex == index) {
        this.$router.push({
          path: "/senderr",
          query: {
            location: item.name,
          },
        });
      } else {
        this.checkedIndex = index;
      }
    },
  },
};
</script>
<style lang='less'  scoped>
.van-hairline--bottom::after {
  border: none;
}
header {
  padding-top: 43px;
  background-color: #fff;
  width: 100vw;
  height: 93px;
  position: fixed;
  top: 0px;
  left: 0;
  z-index: 999;
  .van-nav-bar {
    width: 100%;
    height: 100%;
    line-height: 50px;
    font-size: 25px;
    color: #000;
    /deep/.van-nav-bar__title {
      font-weight: 700;
    }
  }
}
.search {
  position: fixed;
  z-index: 999;
  top: 93px;
  left: 0;
  width: 100%;
  height: 32px;
}
.footer {
  position: fixed;
  z-index: 999;
  bottom: 0;
  left: 0;
  padding-bottom: 34px;
  width: 100%;
  height: 271px;
  background-color: #fff;
  .van-cell {
    position: relative;
    height: 56px;
    i {
      position: absolute;
      color: #ef4f3f;
    }
  }
  .van-cell__title {
    font-size: 14px;
    white-space: nowrap;
    margin-left: 45px;
  }
}
.searchBox {
  position: fixed;
  z-index: 999;
  top: 137px;
  left: 0;
  background-color: #fff;
  width: 100%;
  height: 100%;
  padding-bottom: 34px;
  .van-cell {
    height: 56px;
  }
  .van-cell__title {
    font-size: 14px;
    white-space: nowrap;
  }
}
</style>
